<template>
  <div id="icar-dialog" v-if="isShow">
    <div id="overlay" class="overlay over-position" v-tap="{methods:close}"></div>
    <div id="wrapper" class="wrapper over-position">
      <div class="dialog">
        <div id="header">
          <slot name="head"></slot>
          <!-- <img src="" alt=""> -->
        </div>
        <div id="content" class="content">
          <!-- content -->
          <slot></slot>
        </div>
        <div id="buttons" class="buttons">
          <slot name="button"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * Dialog组件, 弹出框, 可编辑内容, 内部视图需自定义(slot)
 * @augments isShow 是否展示组件
 */
export default {
  name: "icar-dialog",
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit("dialogClose");
    }
  }
};
</script>

<style lang="scss" scoped>
.overlay {
  opacity: 0.4;
  background-color: rgb(0, 0, 0);
  z-index: 100;
}
.over-position {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.wrapper {
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  bottom: 50%;
}
.dialog {
  background-color: #fff;
  width: 80%;
  padding: 20px;
  border-radius: 2px;
  box-shadow: 0 19px 60px rgba(0, 0, 0, 0.298039),
    0 15px 20px rgba(0, 0, 0, 0.219608);
  .content {
    padding: 10px;
  }
  .buttons {
    text-align: right;
  }
}
</style>


